import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueSetupExtend from 'vite-plugin-vue-setup-extend' // script标签上加组件名

// 此处用的 node 语法，需要用require 且需要配置类型声明文件，yarn add @types/node -D
// const path = require('path')
import { resolve } from 'path'
/**
 * ToDo 完成路径别名配置步骤
 * todo 第一步
 * 
 * 导入path 两种方法
 * 第一种 一种是官网推荐的commonJS语法，但需要配置类型声明文件，直接引入path，然后配置path.resolve alias: { '@': path.resolve(__dirname, './src') }
 * 第二种 用ES6的import 直接按需导入 resolve 然后直接配置 resolve， 且需要再tsconfig.json文件下的 compilerOptions中 配置allowSyntheticDefaultImports": true选项
 * 遇到的问题 
 *  1、https://blog.csdn.net/qq_37715639/article/details/127889956
 *  2、https://blog.csdn.net/m0_60622481/article/details/127239990
 * 
 * todo 第二步
 * 再tsconfig.json文件下的 compilerOptions中 配置 
 *      "baseUrl": ".",
 *      "paths": {
 *         "@/*": ["src/*"]
 *       }
 */

// https://vitejs.dev/config/
export default defineConfig({
  // 保证解构后的值仍是响应式的
  // {
  //   reactivityTransform: true
  // }
  plugins: [vue({
    reactivityTransform: true
  }), vueSetupExtend()],
  // todo 配置路径别名 ( @ )
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
      // '*': resolve('')
    }
  },

  // 配置端口号
  server: {
    port: 3001
  },

  // 配置css全局注入
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `
          @import "@/assets/styles/variables.less";
          @import "@/assets/styles/mixins.less";
        `
      }
    }
  }
})
